<template>
    <div class="home">
        <header>
            <h3>我的</h3>
            <span @click="leaveLogin">退出登录</span>
        </header>
        
        <footer>
            <img :src="user_picUrl" alt="">
            <div class="user_text">
                <div>用户名：{{ user_nick_name }}</div>
                <div>用户账号：{{ user_acc }}</div>
            </div>
            <div class="user_revise">
                <button><router-link to="/set">修改用户资料</router-link></button>
            </div>
        </footer>

        
    </div>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue'
    import { showDialog,showConfirmDialog } from 'vant';
    import { userFn } from '../api/index'
    import { useRouter } from 'vue-router'
    const $router = useRouter();
    let user_acc = ref("");
    let user_nick_name = ref("");
    let user_picUrl = ref("");

    const leaveLogin = ()=>{
        showConfirmDialog({
          title: '',
          message:
            '确定要退出登录吗？',
        })
          .then(() => {
            localStorage.removeItem("TOKEN");
            localStorage.removeItem("USER_NAME");
            // 延迟跳转登录页面
            setTimeout(() => {
                $router.replace({path: '/login'})
            }, 150);
          })
          .catch(() => {
          });   
    }

    
    const usersFn = async ()=> {
        // let token = localStorage.getItem("TOKEN")
        await userFn().then(
            (content:any)=>{
                console.log(content)
                let {result, code} = content;
                // console.log(result,code)
                if(code == 200) {
                    user_acc.value = result[0].user_acc;
                    user_nick_name.value = result[0].user_nick_name;
                    user_picUrl.value = result[0].user_picUrl;
                }
            }
        )
    }

    usersFn();


</script>

<style lang="less" scoped>
    .home{
        margin: 5px 10px;
        header{
            position: relative;
            h3{
                text-align: center;

            }   
            span{
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 16px;
                font-weight: 600;
            }
        }
        footer{
            margin-top: 20px;
            img{
                width: 250px;
                height: 250px;
                border-radius: 50%;
                margin: 0 auto;
                display: block;
            }
            .user_text{
                font-size: 18px;
                text-align: center;
                margin-top: 20px;
                div{
                    margin-top: 10px;
                }
            }
            .user_revise{
                text-align: center;
                margin-top: 50px;
                button{
                    background-color: skyblue;
                    border-radius: 40px;
                    font-size: 22px;
                    padding: 5px 10px;
                    font-weight: 600;
                }   
                
            }
        }
    }
</style>